<script setup lang="ts">
import { computed } from 'vue'
defineOptions({
    name: 'BiBootPopup'
})

const show = defineModel<boolean>('show', { required: true })

const lightStyle = computed(() => {
    return { opacity: show.value ? '1' : '0' }
})
</script>

<template>
    <div class="popup">
        <div class="light" :style="lightStyle"></div>
        <van-popup v-model:show="show" round>
            <div class="boot">
                <div class="boot-header" style="margin: 0px 0px 2vmin;"><img src="@/assets/imgs/logo.png" alt="logo"
                        class="boot-header_img">
                    <h4 class="boot-header_h4">KJV Bible</h4>
                </div>
                <h3>KJV Bible - Study Anytime</h3>
                <p>Please upgrade to use this feature</p>
                <div class="download">
                    <a target="_blank" href="https://app.adjust.com/1af1w1ra?campaign=old_package">
                        <img src="@/assets/imgs/googlePlay.svg" alt="googlePlay">
                    </a>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>